<template>
  <div class="map-box com-container">
    <el-row>
      <el-col :span="5" class="col">
        <el-input
          class="input"
          v-model="number"
          ref="myinput"
          @change="numberChange"
          placeholder="请输入学号"
        >
        </el-input>
      </el-col>
      <el-col :span="6" class="col">
        <el-date-picker
          ref="mydate"
          v-model="detetime"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="datetimeChange"
          :default-time="['12:00:00', '08:00:00']"
          format="yyyy 年 MM 月 dd 日 HH时 mm分 ss秒"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="8" class="col">
        <el-cascader
          ref="myCascader"
          :options="options"
          @change="actionChange"
          :props="{ checkStrictly: true }"
          clearable
        ></el-cascader>
      </el-col>
      <el-col>
        <el-button round type="primary" @click="getCollect">形成</el-button>
        
      </el-col>
      <el-col>
        <div class="block">
          <el-slider @change="collect" v-model="juhe"></el-slider>
        </div>
      </el-col>
      <!-- <el-col>
        <el-button round class="chaxun" type="primary" @click="chaXun"
          >查询</el-button
        >
      </el-col>
      <el-col>
        <el-button round type="primary" @click="addData">追加</el-button>
      </el-col> -->
      <!-- <el-col>
        <el-button round type="primary" @click="dianShow">显示点</el-button>
      </el-col>
      <el-col>
        <el-button round type="primary" @click="xianShow">显示线段</el-button>
      </el-col> -->
    </el-row>
   
    <div class="com-chart" id="cesiumContainer">
    </div> 
   
  </div>
</template>

<script>
var viewer = null;
import { bd09towgs84 } from "../utils/bdtowgs";
// import { animatedParabola } from "../utils/animatedParabola";
export default {
  data() {
    return {
      options: [
        {
          value: "吃晚饭",
          label: "吃晚饭",
          children: [
            {
              value: "合利家",
              label: "合利家",
            },
            {
              value: "江西煨汤",
              label: "江西煨汤",
            },
          ],
        },
        {
          value: "吃夜宵",
          label: "吃夜宵",
          children: [
            {
              value: "铁板饭",
              label: "铁板饭",
            },
          ],
        },
        {
          value: "吃早餐",
          label: "吃早餐",
          children: [
            {
              value: "吧台左",
              label: "吧台左",
            },
            {
              value: "北方风味",
              label: "北方风味",
            },
            {
              value: "奶茶",
              label: "奶茶",
            },
          ],
        },
        {
          value: "吃早午饭",
          label: "吃早午饭",
          children: [
            {
              value: "吧台左",
              label: "吧台左",
            },
            {
              value: "大白案",
              label: "大白案",
            },
            {
              value: "合利家",
              label: "合利家",
            },
            {
              value: "铁板饭",
              label: "铁板饭",
            },
            {
              value: "稀食",
              label: "稀食",
            },
            {
              value: "蒸包蒸饺",
              label: "蒸包蒸饺",
            },
          ],
        },
        {
          value: "吃中餐",
          label: "吃中餐",
          children: [
            {
              value: "脆皮烤鸭",
              label: "脆皮烤鸭",
            },
            {
              value: "合利家",
              label: "合利家",
            },
            {
              value: "笼仔(2)",
              label: "笼仔(2)",
            },
            {
              value: "水煮鱼",
              label: "水煮鱼",
            },
            {
              value: "铁板饭",
              label: "铁板饭",
            },
            {
              value: "铁煲烧饭2",
              label: "铁煲烧饭2",
            },
            {
              value: "五谷渔粉",
              label: "五谷渔粉",
            },
            {
              value: "原磨豆浆",
              label: "原磨豆浆",
            },
            {
              value: "自选",
              label: "自选",
            },
            {
              value: "自助餐",
              label: "自助餐",
            },
          ],
        },
        {
          value: "上课",
          label: "上课",
          children: [
            {
              value: "7305",
              label: "7305",
            },
            {
              value: "7402",
              label: "7402",
            },
            {
              value: "8301",
              label: "8301",
            },
            {
              value: "8412",
              label: "8412",
            },
            {
              value: "教室601",
              label: "教室601",
            },
          ],
        },
        {
          value: "移动",
          label: "移动",
          children: [
            {
              value: "活动室",
              label: "活动室",
            },
            {
              value: "教室413",
              label: "教室413",
            },
            {
              value: "教室7502",
              label: "教室7502",
            },
            {
              value: "宿舍107",
              label: "宿舍107",
            },
            {
              value: "宿舍111",
              label: "宿舍111",
            },
            {
              value: "宿舍116",
              label: "宿舍116",
            },
            {
              value: "宿舍209",
              label: "宿舍209",
            },
            {
              value: "宿舍216",
              label: "宿舍216",
            },
            {
              value: "宿舍312",
              label: "宿舍312",
            },
            {
              value: "宿舍322",
              label: "宿舍322",
            },
            {
              value: "宿舍328",
              label: "宿舍328",
            },
            {
              value: "宿舍332",
              label: "宿舍332",
            },
            {
              value: "宿舍410",
              label: "宿舍410",
            },
            {
              value: "宿舍418",
              label: "宿舍418",
            },
            {
              value: "宿舍508",
              label: "宿舍508",
            },
            {
              value: "宿舍512",
              label: "宿舍512",
            },
            {
              value: "宿舍522",
              label: "宿舍522",
            },
            {
              value: "宿舍529",
              label: "宿舍529",
            },
            {
              value: "宿舍536",
              label: "宿舍536",
            },
          ],
        },
        {
          value: "自习或科研",
          label: "自习或科研",
          children: [
            {
              value: "教室601",
              label: "教室601",
            },
            {
              value: "教室7502",
              label: "教室7502",
            },
            {
              value: "教室8410",
              label: "教室8410",
            },
          ],
        },
      ],
      juhe: 0,
      arrcollect: [],
      datalength: null,
      number: "", //输入学号
      detetime: "", //输入日期
      action: "", //输入行为
      roomname: "", //位置
      dataArr: [],
      objAll: [], //前面的数据
      objNew: [], //每次新得到的数据
      samePosition: [],
      samePositionCol: [],
      isDianShow: true,
      isXianShow: true,
      idXian: [],
      idDian: [],
      maximumHeights: [],
      minimumHeights: [],
    };
  },
  mounted() {
    var Cesium = this.Cesium;
    viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false, // 是否显示动画控制
      baseLayerPicker: false, // 底图背景选择框
      geocoder: false, // 右上角查找放大镜
      timeline: false, // 时间线是否显示
      sceneModePicker: false, // 二维三维投影方式显示
      navigationHelpButton: false, // 取消右上角的问号
      homeButton: false, // 首页按钮
      sceneMode: Cesium.SceneMode.SCENE3D, // 2D、3D模式： SCENE2D |MORPHING
      infoBox: false,
      imageryProvider: new Cesium.OpenStreetMapImageryProvider({
        url: "https://a.tile.openstreetmap.org/",
      }),
    });
    viewer._cesiumWidget._creditContainer.style.display = "none";
  },

  methods: {
    getData() {
      const self = this;
      self
        .$http({
          method: "post",
          url: "http://localhost:10520/api/user/studenttrace",
          data: {
            number: self.number,
            detetime: self.detetime,
            action: self.action,
            roomname: self.roomname,
          },
        })
        .then((res) => {
          this.objNew = res.data;
          for (var i = 0; i < this.objNew.length; i++) {
            var bdto = bd09towgs84(this.objNew[i].lon, this.objNew[i].lat);
            this.objNew[i].lon = bdto[0];
            this.objNew[i].lat = bdto[1];
          }
          console.log(this.objNew)
        });
    },
    showData(dataall) {
      // 根据日期转化为高度
      var h = 0;
      var lonlat1 = []; //lonlat1为高度数组
      lonlat1[0] = 0;
      for (var j = 1; j < dataall.length; j++) {
        if (dataall[j].date === dataall[j - 1].date) {
          lonlat1.push(h);
        } else {
          h = h + 20;
          lonlat1.push(h);
        }
      }
      // console.log(lonlat1);

      // 根据日期分数组
      var a = 0;

      const arr = []; //dataall渲染的对象
      dataall.map((mapItem) => {
        if (this.dataArr.length === 0) {
          this.dataArr.push({
            date: mapItem.date,
            List: [mapItem.lon, mapItem.lat, lonlat1[a]],
          });
          arr.push({
            lon: mapItem.lon,
            lat: mapItem.lat,
            hei: lonlat1[a],
          });
          a++;
        } else {
          const res = this.dataArr.some((item) => {
            // 判断相同日期，有就添加到当前项
            if (item.date === mapItem.date) {
              arr.push({
                lon: mapItem.lon,
                lat: mapItem.lat,
                hei: lonlat1[a],
              });
              item.List.push(mapItem.lon, mapItem.lat, lonlat1[a]);

              a++;
              return true;
            }
          });
          if (!res) {
            // 如果没找相同日期添加一个新对象
            this.dataArr.push({
              date: mapItem.date,
              List: [mapItem.lon, mapItem.lat, lonlat1[a]],
            });
            arr.push({
              lon: mapItem.lon,
              lat: mapItem.lat,
              hei: lonlat1[a],
            });
            a++;
          }
        }
      });
      // console.log(this.dataArr);
      // console.log(arr);
      var map = {};

      for (var i = 0; i < arr.length; i++) {
        var ai = arr[i];
        if (!map[ai.lon]) {
          this.samePosition.push({
            ln: ai.lon,
            lt: ai.lat,
            jw: [ai.lon, ai.lat, ai.hei],
          });
          map[ai.lon] = ai;
        } else {
          for (j = 0; j < this.samePosition.length; j++) {
            var dj = this.samePosition[j];
            if (dj.ln === ai.lon && dj.lt === ai.lat) {
              dj.jw.push(ai.lon, ai.lat, ai.hei);
              break;
            }
          }
        }
      }
      // console.log(this.samePosition.length);

      // 渲染水平线段

      if (this.isXianShow) {
        for (var k = 0; k < this.dataArr.length; k++) {
          this.idXian[k] = "xian" + k;
          viewer.entities.add({
            id: this.idXian[k],
            corridor: {
              positions: this.Cesium.Cartesian3.fromDegreesArrayHeights(
                this.dataArr[k].List
              ),
              width: 36,
              height: this.dataArr[k].List[2],
              material: new this.Cesium.PolylineGlowMaterialProperty({
                color: this.Cesium.Color.DEEPSKYBLUE,
                glowPower: 0.25,
              }),
            },
          });
        }
      }
      // if (this.isXianShow) {
      //   for (var k = 0; k < this.dataArr.length; k++) {
      //     this.idXian[k] = "xian" + k;
      //     viewer.entities.add({
      //       id: this.idXian[k],
      //       polyline: {
      //         positions: this.Cesium.Cartesian3.fromDegreesArrayHeights(
      //           this.dataArr[k].List
      //         ),
      //         width: 6,
      //         // material: this.Cesium.Color.fromCssColorString(
      //         //   "rgba(230, 153, 38)"
      //         // ),
      //         material: new this.Cesium.PolylineGlowMaterialProperty({
      //           color: this.Cesium.Color.DEEPSKYBLUE,
      //           glowPower: 0.25,
      //         }),
      //         // clampToGround:true
      //       },
      //     });
      //   }
      // }

      // if (this.isXianShow) {
      //   for (var k = 0; k < this.dataArr.length; k++) {
      //     // console.log(this.dataArr[k].List)
      //    for(var m=0;i<this.dataArr[k].List.length;m=m+3) {
      //      if(!this.dataArr[k].List[m+1]) return
      //        animatedParabola([this.dataArr[k].List[m],this.dataArr[k].List[m+1]],viewer)

      //    }

      //   }
      // }
      // 渲染垂直线段
      // for (k = 0; k < this.samePosition.length; k++) {
      //   viewer.entities.add({
      //     polyline: {
      //       positions: Cesium.Cartesian3.fromDegreesArrayHeights(
      //         dethis.samePositionst[k].jw
      //       ),
      //       width: 2,
      //       material: Cesium.Color.fromCssColorString('rgba(67, 129, 245, 0.75)')

      //     }
      //   })
      // }
      // 渲染点
      if (this.isDianShow) {
        for (i = 0; i < dataall.length; i++) {
          this.idDian[i] = "dian" + i;
          var position = this.Cesium.Cartesian3.fromDegrees(
            dataall[i].lon,
            dataall[i].lat,
            lonlat1[i]
          );
          // console.log(position);
          viewer.entities.add({
            id: this.idDian[i],
            position: position,
            point: {
              show: true, // 是否展示
              outlineWidth: 0, // 边框宽度
              color: this.Cesium.Color.glue, // 点位颜色
              pixelSize: 4,
            },
          });
        }
      }
      viewer.zoomTo(viewer.entities);
    },
    // dianShow() {
    //   this.isDianShow = !this.isDianShow;
    //   for (var i = 0; i < this.datalength; i++) {
    //     viewer.entities.getById(this.idDian[i]).show = this.isDianShow; //通过id找到这些实体，控制要不要显示
    //   }
    // },
    // xianShow() {
    //   this.isXianShow = !this.isXianShow;
    //   for (var k = 0; k < this.dataArr.length; k++) {
    //     viewer.entities.getById(this.idXian[k]).show = this.isXianShow;
    //   }
    // },
    numberChange() {
      this.action = null;
      this.roomname = null;
      this.detetime = "";
      this.number = this.$refs["myinput"].value;
      this.dataArr = [];
      this.datalength = this.objNew.length;
      const that = this;
      let p = new Promise((resolve) => {
        that.getData();
        setTimeout(() => {
          resolve(that.objNew);
        }, 1000);
      });
      //通过.then()的方式 进行调用
      p.then((res) => {
        viewer.entities.removeAll();
        that.showData(res);
      });
    },
    datetimeChange() {
      (this.arrcollect = []),
        (this.samePosition = []),
        (this.samePositionCol = []),
        (this.maximumHeights = []),
        (this.minimumHeights = []),
        (this.action = null);
      this.roomname = null;
      this.detetime = "";
      //日期
      if (this.$refs["mydate"].value.length == 2) {
        this.detetime = this.$refs["mydate"].value;
      }
      this.dataArr = [];
      this.datalength = this.objNew.length;
      const that = this;
      let p = new Promise((resolve) => {
        that.getData();
        setTimeout(() => {
          resolve(that.objNew);
        }, 1000);
      });
      //通过.then()的方式 进行调用
      p.then((res) => {
        viewer.entities.removeAll();
        that.showData(res);
      });
    },
    actionChange() {
      (this.arrcollect = []),
        (this.samePosition = []),
        (this.samePositionCol = []),
        (this.maximumHeights = []),
        (this.minimumHeights = []),
        (this.action = null);
      this.roomname = null;
      //行为
      let labelValue = this.$refs["myCascader"].inputValue;
      let labelValues = [];
      if (labelValue && labelValue.indexOf("/") != -1) {
        labelValues = labelValue && labelValue.split("/");
        labelValues[0] = labelValues[0].replace(/^\s+|\s+$/g, "");
        labelValues[1] = labelValues[1].replace(/^\s+|\s+$/g, "");
        this.action = labelValues[0];
        this.roomname = labelValues[1];
      } else if (labelValue) {
        labelValues[0] = labelValue;
        this.action = labelValues[0];
      }
      this.dataArr = [];
      this.datalength = this.objNew.length;
      const that = this;
      let p = new Promise((resolve) => {
        that.getData();
        setTimeout(() => {
          resolve(that.objNew);
        }, 1000);
      });
      //通过.then()的方式 进行调用
      p.then((res) => {
        viewer.entities.removeAll();
        that.showData(res);
      });
    },
    collect() {
      //  console.log(this.juhe*3);
      const that = this;
      this.samePositionCol = [];
      this.arrcollect = [];
      (this.maximumHeights = []),
        (this.minimumHeights = []),
        (this.samePositionCol = this.samePosition.filter(function (item) {
          return item.jw.length >= that.juhe * 3;
        }));
      for (let i = 0; i < this.samePositionCol.length; i++) {
        this.arrcollect.push(
          this.samePositionCol[i].ln,
          this.samePositionCol[i].lt
        );
        this.maximumHeights.push(40);
        this.minimumHeights.push(0);
      }
      console.log(this.arrcollect);
      console.log(this.maximumHeights);
      console.log(this.minimumHeights);
    },
    getCollect() {
      viewer.entities.removeAll();

      viewer.entities.add({
        wall: {
          positions: this.Cesium.Cartesian3.fromDegreesArray(this.arrcollect),
          maximumHeights: this.maximumHeights,
          minimumHeights: this.minimumHeights,
          outline: true,
          // outlineWidth: 4,
          material: new this.Cesium.PolylineGlowMaterialProperty({
            color: this.Cesium.Color.DEEPSKYBLUE,
            glowPower: 0.25,
          }),
          // material: this.Cesium.Color.fromCssColorString("rgba(235, 17, 100,0.5)"),
        },
      });
      viewer.zoomTo(viewer.entities);
    },

    // chaXun() {
    //   //行为
    //   this.action = null;
    //   this.roomname = null;
    //   this.detetime = "";
    //   //行为
    //   let labelValue = this.$refs["myCascader"].inputValue;
    //   let labelValues = [];
    //   if (labelValue && labelValue.indexOf("/") != -1) {
    //     labelValues = labelValue && labelValue.split("/");
    //     labelValues[0] = labelValues[0].replace(/^\s+|\s+$/g, "");
    //     labelValues[1] = labelValues[1].replace(/^\s+|\s+$/g, "");
    //     this.action = labelValues[0];
    //     this.roomname = labelValues[1];
    //   } else if (labelValue) {
    //     labelValues[0] = labelValue;
    //     this.action = labelValues[0];
    //   }

    //   //日期
    //   if (this.$refs["mydate"].value.length == 2) {
    //     this.detetime = this.$refs["mydate"].value;
    //   }
    //   // console.log(this.$refs["mydate"].value);
    //   // console.log(this.detetime);
    //   // console.log(this.detetime)
    //   this.dataArr = [];
    //   viewer.entities.removeAll();
    //   this.getData();
    //   this.datalength = this.objNew.length;

    //   this.showData(this.objNew);
    // },
    // addData() {
    //   this.action = null;
    //   this.roomname = null;
    //   this.detetime = [];
    //   let labelValue = this.$refs["myCascader"].inputValue;
    //   let labelValues = labelValue && labelValue.split("/");
    //   if (labelValues && labelValues.length == 1) {
    //     labelValues[0] = labelValues[0].replace(/^\s+|\s+$/g, "");
    //     this.action = labelValues[0];
    //     // console.log(this.action);
    //   } else if (labelValues && labelValues.length == 2) {
    //     labelValues[0] = labelValues[0].replace(/^\s+|\s+$/g, "");
    //     labelValues[1] = labelValues[1].replace(/^\s+|\s+$/g, "");
    //     this.action = labelValues[0];
    //     this.roomname = labelValues[1];
    //     // console.log(this.action);
    //   }
    //   this.dataArr = [];
    //   //日期
    //   this.detetime = this.$refs["mydate"].value;
    //   viewer.entities.removeAll();
    //   this.getData();
    //   this.objAll.push(...this.objNew);
    //   this.datalength = this.objAll.length;
    //   this.showData(this.objAll);
    // },
  },
};
</script>

<style scoped>
.input {
  padding-right: 10px;
}
.el-row {
  display: flex;
}
.el-date-picker {
  width: 100%;
  justify-content: center;
}
/* .el-col {
  flex: 1;
}  */
/* .chaxun {
  margin-left: 30px;
} */
.map-box {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}
#cesiumContainer {
  width: 100%;
  height: 94vh;
  position: absolute;
}

</style>
